<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>学生信息查询</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    table {
      border-collapse: collapse;
      width: 50%;
      margin: 20px auto;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: center;
    }
    th {
      background-color: #f2f2f2;
    }
    #searchButton {
      display: block;
      margin: 20px auto;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>

<h2 style="text-align: center;">学生信息</h2>

<button id="searchButton">查询</button>

<table id="studentTable">
  <thead>
  <tr>
    <th>ID</th>
    <th>姓名</th>
    <th>年龄</th>
    <th>班级ID</th>
  </tr>
  </thead>
  <tbody>
  <!-- 学生信息将填充在这里 -->
  </tbody>
</table>

<script>
  $(document).ready(function () {
    // 点击按钮后查询学生数据
    $('#searchButton').click(function () {
      $.ajax({
        type: 'GET',
        url: "/api/resource/v1/student/getById?id=1",
        headers: {
          "Authorization": "Bearer " + JSON.parse(window.localStorage.getItem("token")).id_token,
          "Authorization-TYPE": "ID_TOKEN"
        },
        success: function (data) {
          // 清空之前的数据
          $('#studentTable tbody').empty();
          // 添加新的学生信息
          const studentRow = `
                    <tr>
                        <td>${data.id}</td>
                        <td>${data.name}</td>
                        <td>${data.age}</td>
                        <td>${data.classId}</td>
                    </tr>
                `;
          $('#studentTable tbody').append(studentRow);
        },
        error: function(data) {
          alert("无法获取学生数据！");
        },
        async: true
      });
    });
  });
</script>

</body>
</html>